<!-- 训练配置 -->
<script setup lang="ts">
import type { EditTrainBasicInfo } from "@/common/apis/train/type"
import type { FormRules } from "element-plus"
import { updateTaskApi } from "@/common/apis/train"
import { FormTypeEnum } from "@/common/constants/other-keys"
import { Edit } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import { cloneDeep } from "lodash"

interface Props {
  dialogType: FormTypeEnum
  ruleForm: EditTrainBasicInfo
  isEdit: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(["update:ruleForm"])

const ruleFormRef = ref()
const tempForm = ref<EditTrainBasicInfo | null>(null)

const rules = reactive<FormRules>({
  "train_config.task_config.resources.cpu_num": [{ required: true, message: "请输入", trigger: "change" }],
  "train_config.task_config.resources.gpu_num": [{ required: true, message: "请输入" }],
  "train_config.task_config.resources.worker_num": [{ required: true, message: "请输入" }],
  "train_config.episode_config.max_episode": [{ required: true, message: "请输入" }]
})

const localRuleForm = computed({
  get: () => props.ruleForm,
  set: (newValue) => {
    emit("update:ruleForm", newValue)
  }
})

// 暴露验证方法给父组件
defineExpose({
  validate: async () => {
    if (!ruleFormRef.value) return true
    return await ruleFormRef.value.validate()
      .then(() => true)
      .catch(() => false)
  }
})
</script>

<template>
  <div class="steps-wrapper">
    <el-form ref="ruleFormRef" :model="localRuleForm" status-icon :rules="rules"
      :label-position="isEdit || dialogType == FormTypeEnum.CREATE ? 'top' : 'right'" class="fixed-width">
      <div class="cpi-header-title">
        <SvgIcon name="info-title" />
        <span class="cpi-header-text">训练配置</span>
      </div>
      <div class="engine-config-title">
        <SvgIcon name="info-little-title" class="engine-config-icon" />资源配置
      </div>
      <div class="train-setting-item" v-if="isEdit || dialogType == FormTypeEnum.CREATE">
        <el-form-item label="CPU数量" prop="train_config.task_config.resources.cpu_num">
          <el-input-number v-model.number="localRuleForm.train_config.task_config.resources.cpu_num" :min="1" :step="1"
            clearable step-strictly :controls="false" />
        </el-form-item>
        <el-form-item label="GPU数量" prop="train_config.task_config.resources.gpu_num">
          <el-input-number v-model.number="localRuleForm.train_config.task_config.resources.gpu_num" :min="1" :step="1"
            clearable step-strictly :controls="false" />
        </el-form-item>
        <el-form-item label="节点数量" prop="train_config.task_config.resources.worker_num">
          <el-input-number v-model.number="localRuleForm.train_config.task_config.resources.worker_num" :min="1"
            :step="1" clearable step-strictly :controls="false" />
        </el-form-item>
        <el-form-item label="是否开启分布式" prop="train_config.task_config.resources">
          <el-switch v-model="localRuleForm.train_config.task_config.resources.distributed_enable" />
        </el-form-item>
      </div>
      <div class="train-setting-item" v-else>
        <el-form-item label="CPU数量：">
          {{ localRuleForm.train_config.task_config.resources.cpu_num }}
        </el-form-item>
        <el-form-item label="GPU数量：">
          {{ localRuleForm.train_config.task_config.resources.gpu_num }}
        </el-form-item>
        <el-form-item label="节点数量：">
          {{ localRuleForm.train_config.task_config.resources.worker_num }}
        </el-form-item>
        <el-form-item label="是否开启分布式：">
          {{ localRuleForm.train_config.task_config.resources.distributed_enable ? "是" : "否" }}
        </el-form-item>
      </div>
      <div class="engine-config-title">
        <SvgIcon name="info-little-title" class="engine-config-icon" />
        <span>训练配置</span>
      </div>
      <div class="train-setting-item" v-if="isEdit || dialogType == FormTypeEnum.CREATE">
        <el-form-item label="最大局数(1-1000000)" prop="train_config.episode_config.max_episode">
          <el-input-number v-model.number="localRuleForm.train_config.episode_config.max_episode" :min="1"
            :max="1000000" :step="1" clearable step-strictly :controls="false" />
        </el-form-item>
      </div>
      <div class="train-setting-item" v-else>
        <el-form-item label="最大局数(1-1000000)：">
          {{ localRuleForm.train_config.episode_config.max_episode }}
        </el-form-item>
      </div>
      <div class="engine-config-title">
        <SvgIcon name="info-little-title" class="engine-config-icon" />
        <span>测试配置</span>
      </div>
      <div class="train-setting-item" v-if="isEdit || dialogType == FormTypeEnum.CREATE">
        <el-form-item label="测试间隔局数(1-10000)" prop="train_config.test_config.test_interval">
          <el-input-number v-model.number="localRuleForm.train_config.test_config.test_interval" :min="1" :max="10000"
            :step="1" clearable step-strictly :controls="false" />
        </el-form-item>
        <el-form-item label="测试局数(1-10000)" prop="train_config.test_config.test_num">
          <el-input-number v-model.number="localRuleForm.train_config.test_config.test_num" :min="1" :max="10000"
            :step="1" clearable step-strictly :controls="false" />
        </el-form-item>
      </div>
      <div class="train-setting-item" v-else>
        <el-form-item label="测试间隔局数(1-10000)：">
          {{ localRuleForm.train_config.test_config.test_interval }}
        </el-form-item>
        <el-form-item label="测试局数(1-10000)：">
          {{ localRuleForm.train_config.test_config.test_num }}
        </el-form-item>
      </div>
      <div class="engine-config-title">
        <SvgIcon name="info-little-title" class="engine-config-icon" />
        <span>保存配置</span>
      </div>
      <div class="train-setting-item" v-if="isEdit || dialogType == FormTypeEnum.CREATE">
        <el-form-item label="训练样本数据" prop="train_config.save_config.training_sample_data.save_enable"
          label-position="left">
          <el-switch v-model="localRuleForm.train_config.save_config.training_sample_data.save_enable" />
        </el-form-item>
        <el-form-item label="智能体" prop="train_config.save_config.decision_model.save_enable" label-position="left">
          <el-switch v-model="localRuleForm.train_config.save_config.decision_model.save_enable" />
        </el-form-item>
      </div>
      <div class="train-setting-item" v-else>
        <el-form-item label="训练样本数据：" label-position="left">
          {{ localRuleForm.train_config.save_config.training_sample_data.save_enable ? "是" : "否" }}
        </el-form-item>
        <el-form-item label="智能体：" label-position="left">
          {{ localRuleForm.train_config.save_config.decision_model.save_enable ? "是" : "否" }}
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.steps-wrapper {
  margin: 20px 0;
  padding: 20px;
  width: 100%;
  height: auto;
  background: #031527;
}

:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
}

.train-setting-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 10px;
}

.train-setting-item-border {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .1)
}

.el-form-item {
  margin-right: 35px;
}

.engine-config-title {
  margin-bottom: 10px;
}

.engine-config-icon {
  margin-right: 10px;
}

.cpi-header-title {
  margin-bottom: 20px;
}

.cpi-header-text {
  margin-left: 6px;
}
</style>
